<template>
  <div class="eqDetails">
    <el-card shadow="never" class="hover">
      <div class="container">
        <div class="row">
          <div class="col col-xxl-11 col-xl-11 col-lg-10 col-md-12 col-sm-12">
            <div class="details_">
              <img :src="info.img" class="details_img" />
              <div class="details_list">
                <h1>编号：{{ info.name }}</h1>
                <h3>
                  序列号：{{ info.xid }} <span style="margin-left: 20px">型号：{{ info.model }}</span>
                </h3>
                <div class="creation">
                  <div>
                    <p>属性：{{ info.iname }}</p>
                    <p></p>
                  </div>
                  <div>
                    <p>创建时间：{{ info.createDate }}</p>
                    <p>容量：{{ info.course || 0 }}g/{{ info.capacity || 0 }}g</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-xxl-1 col-xl-1 col-lg-2 col-md-12 col-sm-12">
            <div class="btn_right">
              <el-button @click="operation('limit')" size="medium" v-if="info.status == 1" class="limit">限制</el-button>
              <el-button @click="operation('iNlimit')" size="medium" v-else-if="info.status == 2" class="iNlimit">解除</el-button>
              <!-- <el-button @click="goBack" style="width: 90px;">返回</el-button> -->
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <div class="cry">
      <el-tabs v-model="activeName">
        <el-tab-pane label="课件列表" name="1"></el-tab-pane>
      </el-tabs>

      <div v-show="activeName == '1'" class="first_">
        <search @searchOn="searchOn" @clearChange="clearChange" @changeEnter="changeEnter"></search>
        <el-table stripe :data="tableData" style="width: 100%; margin: 25px 0 36px 0" :header-cell-style="{ background: '#f2f2f2', color: '#333', fontWeight: 600 }">
          <el-table-column label="课件名称" align="center">
            <template slot-scope="scope">{{ scope.row.name == null ? '--' : scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="学科" align="center">
            <template slot-scope="scope">{{ scope.row.subject == null || scope.row.subject == '' ? '--' : scope.row.subject }}</template>
          </el-table-column>
          <el-table-column label="年级" align="center">
            <template slot-scope="scope">{{ scope.row.clas == null || scope.row.clas == '' ? '--' : scope.row.clas }}</template>
          </el-table-column>
          <el-table-column label="文件大小(M)" align="center">
            <template slot-scope="scope">{{ scope.row.capacity == null ? '--' : scope.row.capacity }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import search from '../../components/search/search.vue'
export default {
  components: { search },
  data() {
    return {
      activeName: '1',
      tableData: [],
      info: {}, // 传递过来的数据
      currentPage3: 1,
      pageSize: 0,
      total: 0,
      time: null, // 搜索的防抖
      souSuo: '',
    }
  },
  mounted() {
    var _this = this
    if (_this.$route.params.add === 'detaAdd') {
      _this.info = _this.$route.params.row
      _this.publicFunction()
    } else {
      _this.info = JSON.parse(sessionStorage.getItem('jumpListUser'))
      // sessionStorage.setItem('jumpListUser', JSON.stringify(_this.info));
      _this.publicFunction()
    }
  },
  methods: {
    // 登录限制
    operation(state) {
      // console.log(state)
      if (state == 'limit') {
        this.$confirm('确定需要限制本账号吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$http.equipment.limitList({ id: JSON.parse(sessionStorage.getItem('jumpListUser')).id }).then((res) => {
              this.info.status = 2
              this.$message({
                type: 'success',
                message: '限制成功!',
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消限制',
            })
          })
      } else if (state == 'iNlimit') {
        this.$confirm('确定需要解除限制本账号吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$http.equipment.piLiangRrelieve({ id: JSON.parse(sessionStorage.getItem('jumpListUser')).id }).then((res) => {
              this.info.status = 1
              this.$message({
                message: '成功解除当前设备限制',
                type: 'success',
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消解除当前设备限制',
            })
          })
      }
    },
    // 按钮搜索
    searchOn(val) {
      if (val == '') return false
      else {
        this.publicFunction(val)
        this.souSuo = val
      }
    },
    // 搜索的清除按钮
    clearChange() {
      this.publicFunction()
    },
    // 失去焦点或者按回车触发事件
    changeEnter(val) {
      this.publicFunction(val)
    },
    // 搜索公告方法
    publicFunction(val) {
      if (this.time) {
        clearTimeout(this.time)
      }
      this.time = setTimeout(async () => {
        await this.$http.equipment.equipmentDetrails({ id: JSON.parse(sessionStorage.getItem('jumpListUser')).id, name: val }).then((res) => {
          this.tableData = res.data
          this.pageSize = res.size
          this.total = res.total
          this.currentPage3 = res.currentPage
        })
      }, 300)
    },
    // 详情跳转至课件详情
    handleEdit(index, row) {
      sessionStorage.setItem('userData', JSON.stringify(row))
      this.$router.push({ name: 'details', params: { index, row, add: 'eqAdd' } })
    },
    // 分页操作
    handleSizeChange(val) {
      this.currentPage = val
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.gongFenYe(val, JSON.parse(sessionStorage.getItem('jumpListUser')).id, this.souSuo);
    },
    gongFenYe(val, sId, souSuo) {
      this.currentPage = val;
      this.$http.equipment.equipmentDetrails({ id: sId,page: val,warename: souSuo }).then((res) => {
        this.tableData = res.data
      })
    },
    // 返回上一页goBack() { this.$router.go(-1); if(this.$route.params.add != 'detaAdd') { sessionStorage.removeItem('jumpListUser') } }
  },
}
</script>

<style scoped>
@import '../../assets/css/equipment/eqDetails.scss';
</style>
